<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线评议</title>

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <!-- 引入样式 -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<h1>社会评议得分</h1>
    <div id="tableView">
        <el-row>
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="评议单位">
                    <el-input v-model="searchForm.name" placeholder="评议单位"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="search" @click="loadTable">查询</el-button>
                    <el-button type="success" icon="el-icon-back" @click="back">返回</el-button>
                    <el-button type="success"  icon="el-icon-share" @click="daoChu">导出数据</el-button>
                </el-form-item>
            </el-form>
        </el-row>

        <el-table
                ref="multipleTable"
                :data="tableData"
                border
                height="530px"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection">
            </el-table-column>

            <el-table-column
                    type="index"
                    width="50"
                    align="center"
                    label="序号">
            </el-table-column>

            <el-table-column
                    prop="name"
                    label="评议单位"
                    align="center">
            </el-table-column>

            <el-table-column
                    prop="SHtime"
                    label=" 评议时间"
                    align="center">
            </el-table-column>

            <el-table-column
                    prop="appscore"
                    label="评议得分"
                    align="center">
            </el-table-column>
        </el-table>

        <!--列表底部工具条和分页符-->
        <el-row style="margin-top: 20px" type="flex" justify="end">
            <el-col :span="18" >
                <el-pagination
                        style="float: right"
                        @size-change="pageSizeChange"
                        @current-change="currentPageChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</body>
    <script>
        var vm=new Vue({
            el:"#tableView",
            data:{
                //声明变量存放查出来的数据
                tableData:[],
                //分页大小
                pageSize:5,
                //当前页数
                currentPage:1,
                //总条数
                total:10,
                //多选值
                multipleSelection: [],
                //搜索栏
                searchForm: {
                    name:"",
                }
            },
            created:function(){
                //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
                var self = this;
                //从第几条开始查
                var start =(this.currentPage-1)*this.pageSize;
                //this.pageSize查询几条
                axios.post('/pyOnline/getInfo',{'start':start,'pageSize':this.pageSize}).then(function(response){
                    //设置总条数
                    self.total=response.data.total;
                    //设置表格数据
                    self.tableData = response.data.data;
                })
            },
            methods: {
                //表格重新加载
                loadTable: function () {
                    var self = this;
                    var start = (this.currentPage - 1) * this.pageSize;
                    axios.post('/pyOnline/getInfo', {
                        'start': start,
                        'pageSize': this.pageSize,
                        'name': this.searchForm.name
                    }).then(function (response) {
                        self.total = response.data.total;
                        self.tableData = response.data.data;
                    })
                },
                //存储选中的值
                handleSelectionChange:function(val){
                    this.multipleSelection=val;
                },
                //返回
                back:function(){
                    location.href="../zhishi/html";
                },
                //导出
                daoChu:function(){
                    var selectChange=this.multipleSelection;
                    if(selectChange.length>0){
                        axios.post("../pyOnline/data",{"xinxi":selectChange}).then(function(response){
                            if(response.data==1){
                                location.href="../pyOnline/export"
                            }
                        });
                    }else{
                        this.$message({
                            message:'请至少选中一个',
                            type:'error'
                        });
                    }




                }
            }
        });
    </script>

</html>